<!DOCTYPE html>
<html style="cursor: auto;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>抽奖</title>

  <link href="{$_G['URL']['YX2020_CSS']}css/lottery.css" rel="stylesheet">
  <script src="./resource/js/lib/jquery-1.11.1.min.js"></script>
  <script>
    let windowScale = 1920 / window.innerWidth * (window.innerWidth < 1400 ? 0.9 : 1);
    let curGift;
    let data;
    let cheatUsers;
    let curCount = 5;
    let imagePreload = new Image();
    let kick = 0;
    let cheat = "";
    let virtual = 0;
    let fillUser;
    let recodeList;
    let curRecode;
    let curRecodeGift;
    function preloadImage(src) {
      imagePreload.src = src;
    }
    function minusClick() {
      if (started)
        return;
      curCount = Math.max(1, curCount - 1);
      $("#count")[0].innerText = curCount;
      $("#gift-select").css('display', 'none');
      if (curGift) {
        $("#gifViewName")[0].innerText = curGift.name + "(共" + curCount + "人)";
      }
    }
    function plusClick() {
      if (started)
        return;
      curCount = Math.min(curCount + 1, 30);
      $("#count")[0].innerText = curCount;
      $("#gift-select").css('display', 'none');
      if (curGift) {
        $("#gifViewName")[0].innerText = curGift.name + "(共" + curCount + "人)";
      }
    }
    function giftClick() {
      let value_selectStaus = $("#gift-select").css("display") == "none";
      $("#gift-select").css('display', value_selectStaus ? 'block' : 'none');
      if (value_selectStaus)
        $("#value-select").css('display', 'none');
    }
    function giftSelect(g) {
      g = lotterys[g]
      curGift = g;
      $("#giftName")[0].innerText = g.name;
      $("#gift-select").css('display', 'none');
      $("#gifViewName")[0].innerText = g.name + "(共" + curCount + "人)";
      $("#giftimg")[0].src = g.icon;

    }
    function valueClick() {
      let value_selectStaus = $("#value-select").css("display") == "none";
      if (value_selectStaus) {
        $("#value-select").css("display", "block");
        $("#gift-select").css('display', 'none');
      }
      else {
        $("#value-select").css("display", "none");
      }
    }
    function valueSelect(n) {
      if (started)
        return;
      $("#value-select").css("display", "none");
      curCount = n;
      $("#count")[0].innerText = curCount;
      if (curGift != null) {
        $("#gifViewName")[0].innerText = curGift.name + "(共" + n + "人)";
      }
    }
    function initValSelect() {
      let ul = document.createElement("ul");
      let str = "<ul>"
      /*for (let i = 1; i <= 29; i++) {
        let v = (i > 10 ? (i - 10 + 1) * 10 : i);
        let element = document.createElement('li');
        element.innerText = v;
        element.onclick = function () {
          valueSelect(v);
        };
        ul.appendChild(element);
      }*/
      for (let i = 1; i <= 29; i++) {
        let v = i;//(i > 10 ? (i - 10 + 1) * 10 : i);
        let element = document.createElement('li');
        element.innerText = v;
        element.onclick = function () {
          valueSelect(v);
        };
        ul.appendChild(element);
      }
      $("#value-select")[0].appendChild(ul);
    }
    let started = false;
    function start() {
      if (!started) {
        $("#gift-select").css('display', 'none');
        $('#value-select').css('display', 'none');
        $('.prize-block').css('display', 'none');
        $('.luckydraw-block').css('display', 'block');
        $('.start-btn')[0].innerText = "停止";
        started = true;
        curUserObj = [];
        curUserData = [];
        createUser();
        curEndIndex = 0;
      } else {
        started = false;
        if (timer != null) {
          clearInterval(timer);
          timer = null;
        }
        if (curUserData == null || curUserData == undefined) {
          curUserData = [];
          for (let i = 0; i < curCount; i++) {
            curUserData.push(fillUser[i]);
          }
        } else {
          for (let i = 0; i < curUserData.length; i++) {
            curUserObj[i].src = curUserData[i].avatar;
          }
        }

        if (cheatUsers.length > 0) {
          let cheatSize = Math.min(cheatUsers.length, curCount);
          for (let i = curUserData.length - cheatSize; i < curUserData.length; i++) {
            curUserData[i] = cheatUsers[curUserData.length - 1 - i];
          }
        }

        let fi = 0
        for (let i = 0; i < curUserData.length; i++) {
          if (curUserData[i] == undefined) {
            curUserData[i] = fillUser[fi];
            fi++;
          }

        }
        let users = [];
        curUserData.forEach(it => {
          users.push(it.openid);
        });
        $.ajax({
          url: baseUrl + "&op=sr&gid=" + curGift.id,
          data: { user: users },
          method: 'POST',
          success: function (e) {
            curRecode = curUserData;
            curRecodeGift = curGift;
            curResultIndex = recodeList.length;
            recodeList.push({
              recode:curRecode,
              gift:curGift,
            })
            
            viewResult();
          }
        })
      }
    }
    let curResultIndex = 0;
    function findRecode(i) {
      curResultIndex = i;
      curRecode = recodeList[i].recode;
      curRecodeGift = recodeList[i].gift;
    }
    function viewResult() {
      if(recodeList != undefined &&recodeList.length > 0)
        findRecode(curResultIndex);
      document.getElementById("periodName").innerText = "第" + (curResultIndex + 1 ) + "期中奖名单";
      $(".scroll-area-item-list").scrollTop(0);
      $(".scroll-area-item-list")[0].innerHTML = "";
      document.getElementById("nextresult").style.display = curResultIndex < recodeList.length - 1 ? "block":"none";
      document.getElementById("prevresult").style.display = curResultIndex > 0 ? "block":"none";
      $(".flex-area-item-list")[0].innerHTML = "";
      $('.luckydraw-premium-container').css('display', 'none');
      $('.premium-record').css('display', 'block');
      $("#gift-select").css('display', 'none');
      $("#value-select").css('display', 'none');
      document.getElementById("resultgift").innerText = curRecodeGift.name + "(共" + curRecode.length + "人)";
      createResultUser();
    }
    function restart() {
      $(".scroll-area-item-list").scrollTop(0);
      $(".scroll-area-item-list")[0].innerHTML = "";
      $('.prize-block').css('display', 'block')
      $('.luckydraw-block').css('display', 'none');
      $('.start-btn')[0].innerText = "开始";
      $('.luckydraw-premium-container').css('display', 'block');
      $('.premium-record').css('display', 'none');
    }
    function init() {
      initValSelect();
      cacheIcon.forEach(it => {
        preloadImage(it.avatar);
      });
      $(".prize-block")[0].classList.add(".card-enter-anim");
      $("#count")[0].innerText = curCount;
      $.ajax({
        url:baseUrl,
        data:{
          op:'lr',
        },
        success:function(e){
          recodeList = JSON.parse(e);
        }
      })
    }
    let curUserData = [];
    let curEndIndex = 0;
    function getNextUser(c) {
      if (!started)
        return;
      if (data.length == 0)
        return;
      let r = [];
      for (; r.length < c; curEndIndex++) {
        if (curEndIndex >= data.length) {
          curEndIndex = 0;
        }
        r.push(data[curEndIndex]);
      }
      curEndIndex++;
      return r;
    }
    let curAvatarEndIndex = 0;
    function getNextAvatar(c) {
      if (!started)
        return;
      let r = [];
      for (; r.length < c; curAvatarEndIndex++) {
        if (curAvatarEndIndex >= cacheIcon.length) {
          curAvatarEndIndex = 0;
        }
        r.push(cacheIcon[curAvatarEndIndex]);
      }
      curAvatarEndIndex++;
      return r;
    }
    let timer = null;
    function startRandom() {

      timer = setInterval(() => {
        if (started) {
          let curAvatarData = getNextAvatar(curUserObj.length);
          curUserData = getNextUser(curUserObj.length);
          for (let i = 0; i < curUserObj.length; i++) {
            curUserObj[i].src = curAvatarData[i].avatar
          }
        }
      }, 50);
    }

    let curUserObj = [];
    function createUser() {
      let xa = [1.85, 1.2, 0.65, 0.4];
      let n = curCount;
      let s = 0;
      let x = 1.85;
      if (n < 6) {
        s = 6
        x = xa[0];
      } else if (n <= 10) {
        s = Math.ceil(n / 2);
        x = xa[1] - 0.2;
      } else if (n <= 30) {
        s = Math.ceil(n / 3);
        x = xa[2];
      } else {
        s = Math.ceil(n / 4);
        x = xa[3];
      }
      x = x / windowScale;
      let row;
      for (let i = 0; i < n; i++) {
        if (i % s == 0) {
          row = document.createElement('div');
          row.setAttribute("data-v-2fec486a", "");
          row.classList.add("row");
          row.style = "height:" + (50 * x) + "%";
          $(".flex-area-item-list")[0].appendChild(row);
        }
        let col = document.createElement('div');
        col.setAttribute("data-v-2fec486a", "");
        col.classList.add("col");
        col.style = "width:" + (300 * x) + "px;height:" + (300 * x) + "px;display:block;";

        let item = document.createElement("div");
        item.classList.add("item");
        item.setAttribute("data-v-2fec486a", "");
        let scale = 0.563333 * x;
        item.style = "width:600px;height:600px;transform:translate(-50%, -50%) scale(" + scale + ", " + scale + ");";

        let avatar = document.createElement("div");
        avatar.setAttribute("data-v-2fec486a", "");
        avatar.classList.add("luckydraw-premium-avatar-item");
        avatar.classList.add("on");

        let avatar_bg = document.createElement("div");
        avatar_bg.setAttribute("data-v-2fec486a", "");
        avatar_bg.classList.add("avatar-bg");
        avatar_bg.style = "background-image:url({$_G['URL']['YX2020_CSS']}images/lottery-res.png";

        let avatar_img = document.createElement("img");
        avatar_img.setAttribute("data-v-2fec486a", "");
        curUserObj.push(avatar_img);

        //avatar.appendChild(avatar_bg);
        avatar.appendChild(avatar_img);

        item.appendChild(avatar);

        col.appendChild(item);

        row.appendChild(col);
      }
      startRandom();
    }

    function createResultUser() {
      let curUserData = curRecode;
      let xa = [3.0, 2.0, 1.6, 1];
      let x = 3.0;
      let m = curUserData.length;
      let s = 0;
      if (m < 6) {
        s = 6;
        x = xa[1];
      } else if (m < 10) {
        s = Math.ceil(m / 2);
        x = xa[1];
      } else {
        s = 5;
        x = xa[2];
      }
      x = x / windowScale;
      let row;
      for (let i = 0; i < m; i++) {
        if (i % s == 0) {
          row = document.createElement("div");
          row.setAttribute("data-v-cf0a5884", "");
          row.classList.add("row");
          let padding = 60 * x;
          row.style = "height:auto;margin-top: " + padding + "px;padding-bottom:" + padding + "px;";
          $(".scroll-area-item-list")[0].appendChild(row);
        }
        let col = document.createElement("div");
        col.setAttribute("data-v-cf0a5884", "");
        col.classList.add("col");
        col.style = "width:411px;height:261px";
        row.appendChild(col);

        let item = document.createElement("div");
        col.appendChild(item);
        item.classList.add("item");
        item.setAttribute("data-v-cf0a5884", "");
        item.style = "width: 673.6px; height: 774px; transform: translate(-50%, -50%) scale(" + (0.337209 * x) + ", " + (0.337209 * x) + ");";

        let panel = document.createElement("div");
        panel.setAttribute("index", i);
        panel.setAttribute("data-v-cf0a5884", "")
        panel.classList.add("record");
        panel.classList.add("animation");

        item.appendChild(panel);

        let wrap = document.createElement("div");
        wrap.style = "border-image-source: url(); animation-delay: 1525ms;";
        wrap.classList.add("wrap");
        wrap.setAttribute("data-v-cf0a5884", "");
        panel.appendChild(wrap);

        let image = document.createElement("div");
        image.setAttribute("data-v-cf0a5884", "");
        image.classList.add("image");
        image.style = "border-color: rgb(255, 255, 255); background-color: rgb(102, 51, 0);";
        wrap.appendChild(image);

        let img = document.createElement("img");
        img.setAttribute("data-v-cf0a5884", "");
        img.src = curUserData[i].avatar;
        image.appendChild(img);

        let name = document.createElement("div");
        name.innerText = curUserData[i].nickname;
        name.classList.add("name");
        name.setAttribute("data-v-cf0a5884", "");
        wrap.appendChild(name);

        let tel = document.createElement("div");
        if (curUserData[i].mobile == undefined) {
          curUserData[i].mobile = chinamobile();
        }
        tel.innerText = curUserData[i].mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        tel.classList.add("name");
        tel.setAttribute("data-v-cf0a5884", "");
        wrap.appendChild(tel);

        let light = document.createElement("div");
        light.setAttribute("data-v-cf0a5884", "");
        light.style = "background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png); animation-delay: 1225ms;";
        light.classList.add("light");
        panel.appendChild(light);
      }

    }
    function chinamobile() {
      var seed = '0123456789',
        i = 0,
        len = seed.length,
        max = 11,
        rs = '',
        min = 0;
      var def = new Array(139, 138, 137, 136, 135, 134, 159, 158, 157, 150, 151, 152, 188, 130, 131, 132, 156, 155, 133, 153, 189);
      var st = 0;
      if (st == 0) rs = def[Math.floor(Math.random() * def.length)].toString();
      else rs = st.toString();
      min = rs.length;
      for (i = 0; i < max - min; i++) rs += seed.substr(Math.floor(Math.random() * len), 1);
      return rs;
    }
    function openSetting() {
      $(".divBG").css('display', 'block');
      $("#kick")[0].checked = kick == 'on';
      $("#cheat")[0].value = cheat;
      $("#virtual")[0].value = virtual;
      document.getElementById('virtualJoin').value = fake;
    }
    function startClick() {
      if (started) {
        start()
      } else {
        listUsers();
      }
    }
    let requesting = false;
    function listUsers() {
      if (requesting) {
        //return;
      }
      requesting = true;
      if (curGift == null) {
        alert('请选择奖品!');
        requesting = false;
        return;
      }
      $.ajax({
        url: baseUrl + "&op=listuser&gid=" + curGift.id + (kick != "on" ? "&kick=1" : "") + "&virtual=" + virtual,
        dataType: 'json',
        data: { 'cheat': cheat },
        method: 'post',
        success: (function (e) {
          cheat = "";
          virtual = 0;
          requesting = false;
          data = e.user;
          cheatUsers = e.cheat;
          fillUser = e.fill;
          start();
        })
      })
    }
    function saveSetting() {
      virtual = parseInt($("#virtual")[0].value);
      efake = document.getElementById("virtualJoin").value;
      if (efake != fake) {
        $.ajax({
          url: '{php echo createWebUrl("clotterypage",array("themeid"=>$themeid,"op"=>"fake"));}',
          data: { fake: efake },
          success: function (e) {
            fake = efake;
          }
        })
      }
      if (virtual > efake) {
        alert("虚拟中奖用户不能超过虚拟报名用户");
        return;
      }
      $(".divBG").css('display', 'none');
      kick = $("#kick")[0].value;
      cheat = $("#cheat")[0].value;
      virtual = $("#virtual")[0].value;
    }
    function closeSetting() {
      $(".divBG").css('display', 'none');
    }
    function nextRecode() {
      curResultIndex ++;
      viewResult();
    }
    function prevRecode() {
      curResultIndex --;
      viewResult();
    }
  </script>
  <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 45px;
      height: 18px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 10px;
      width: 10px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked+.slider {
      background-color: #2196F3;
    }

    input:focus+.slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
  </style>
  <style>
    .divBG {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      display: none;
      z-index: 20;
    }

    .PopUp {
      position: fixed;
      z-index: 50 !important;
      background-color: White;
      height: 80%;
      width: 50%;
      border-style: solid solid solid solid;
      border-width: 5px 5px 5px 5px;
      border-radius: 15px;
      border-color: #cccc99;
      margin: 10%;
      margin-left: 35%;
    }
  </style>
</head>

<body onload="init()">
  {if empty($lotterys)}
  <script>
    alert('未配置抽奖信息');
  </script>
  {/if}
  <?php 
    echo '<script>';
    echo 'let fake = ' . $config['fakejoin']. ";";
    echo 'var baseUrl = "' . createWebUrl('clotterypage',array('themeid'=>$themeid)).'";';
    echo 'var cacheIcon = '. json_encode($cacheIcon).";";
    echo '</script>';
  ?>
  <div>
    <div class="screen-container">
      <div class="hudong">
        <div class="lottery-container"
          style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-bg.jpg); color: rgb(255, 255, 255);">
          <div class="lottery-panel lottery-premium-panel" style="zoom: 0.693519;">
            <div class="luckydraw-premium-container">
              <div class="top">
                <div class="prize-block">
                  <div class="prize-wrap">
                    <div class="prize-info"
                      style="border-color: rgb(255, 255, 255); box-shadow: rgb(255, 200, 0) 0px 0px 16px 0px, rgb(255, 200, 0) 0px 0px 100px 0px inset;">
                      <div class="img-wrap"
                        style="border-color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.6); box-shadow: rgb(255, 200, 0) 0px 0px 16px 0px, rgb(255, 200, 0) 0px 0px 100px 0px inset;">
                        <div class="img" style="background-color: rgb(255, 255, 255);">
                          <img id="giftimg" src="{$_G['URL']['YX2020_CSS']}images/luckydraw.png" alt=""></div>
                      </div>
                      <div class="name-wrap">
                        <div id="gifViewName" class="name">请选择奖品</div>
                      </div>
                    </div>
                  </div>
                  <div class="bottom-container" style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                  </div>
                </div>
                <div class="luckydraw-block"
                  style="display: none;border-image-source: url();">
                  <div class="player-avatars">
                    <div data-v-2fec486a="" class="flex-area-item-list">
                    </div>
                  </div>
                </div>
                <div class="bottom">
                  <div class="bottom-bg" style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                  </div>
                  <div class="operation-block">
                    <div class="counter-container" style="margin-top:5px">
                      <div class="wrap clearfix">
                        <div
                          style="width: 260px;height: 30px;margin-left: 20px;margin-bottom: 20px;display: flex;flex-direction: row;justify-content: left;">
                          <div class="counter-component luckydraw-premium-counter-component">
                            <div style="line-height: 50px;">奖品:&nbsp;&nbsp;</div>
                            <div class="value">
                              <div id="gift-select" class="value-select" style="display: none;">
                                <ul>
                                  <?php 
                                  echo "<script>";
                                  echo "let lotterys = ".json_encode($lotterys);
                                  echo "</script>";
                                ?>
                                  {loop $lotterys $i $l}
                                  <li onclick='giftSelect({$i})'>{$l['name']}</li>
                                  {/loop}
                                </ul>
                              </div>
                              <div id="giftName" class="count" onclick="giftClick()"
                                style="height: 40px;border-color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.2); box-shadow: rgb(255, 200, 0) 0px 0px 8px 0px;font-size: 18px;line-height: 40px;">
                                请选择奖品</div>
                            </div>
                            <div style="line-height: 50px;" onclick="openSetting()">设置</div>
                          </div>
                        </div>
                        <div class="counter-component luckydraw-premium-counter-component">
                          <div style="line-height: 60px;font-size: 20px;">人数:</div>
                          <div class="minus" onclick="minusClick()"
                            style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                            <i class="screenfont icon-minus"></i>
                          </div>
                          <div class="value">
                            <div id="value-select" class="value-select" style="display: none;">
                            </div>
                            <div id="count" class="count" onclick="valueClick()"
                              style="border-color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.2); box-shadow: rgb(255, 200, 0) 0px 0px 8px 0px;">
                              5</div>
                          </div>
                          <div class="plus" onclick="plusClick()"
                            style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                            <i class="screenfont icon-plus"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="start-btn-wrap">
                      <div class="start-btn" onclick="startClick()"
                        style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                        开 始</div>
                    </div>
                    <div class="winner-list-btn" onclick="viewResult()"
                      style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                      <span class="a">
                        <i class="screenfont icon-record"></i>中奖名单</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="premium-record"
              style="display: none;border-image-source: url(); animation-delay: 0s; color: rgb(255, 255, 255);">
              <div class="top" style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                <div onclick="restart()" class="screenfont icon-close close-icon" onclick="close"
                  style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);">
                </div>
                <p style="top: 0;font-size: 40px;line-height: 70px;" id="periodName">第一期</p>
              </div>
              
              <div class="turn" id="resultgift" style="display: block;top:0;font-size: 30px;">特等奖</div>
              <div class="middle">
                <div class="lottery-record-list">

                  <div
                    class="swiper-container lottery-record-swiper swiper-container-initialized swiper-container-horizontal">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide swiper-slide-active"
                        style="width: 90%;margin-left: 5%;margin-right: 5%;">
                        <div data-v-cf0a5884="" class="scroll-area-item-list" scroll="true" style="overflow-y: scroll;">

                        </div>
                      </div>

                    </div>
                    <div id="nextresult" class="swiper-button-next swiper-button-white" style="display: none;" onclick="nextRecode()">
                    </div>
                    <div id="prevresult"  class="swiper-button-prev swiper-button-white" onclick="prevRecode()"
                      style="display: none;"></div>
                    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="divBG">
    <div class="PopUp">
      <center>
        <div onclick="closeSetting()" class="screenfont icon-close close-icon" onclick="close"
          style="background-image: url({$_G['URL']['YX2020_CSS']}images/lottery-res.png);width: 60px;height:60px;float:right;">
        </div>
        <h1 style="margin-top: 10px;margin-left: 50px;">抽奖设置</h1>

      </center>
      <div style="margin-left: 50px;">
        <div style="margin-top: 20px;">
          <div>
            <span style="line-height: 34px;text-align: center;">重复中奖:</span> <label class="switch">
              <input id="kick" type="checkbox">
              <span class="slider round"></span></label></div>
        </div>

        <div style="margin-top: 25px;float:left">
          <h3>以下设置仅本轮有效</h3><br />必中奖用户:
        </div><br />

        <textarea placeholder="输入用户手机号,以,分割(例:13812345678,13312345678)" id="cheat"
          style="width:80%;min-height:200px;border-radius: 5px;resize: none;border-color: gray;"></textarea><br />
        <div style="margin-top: 20px;">
          <div>
            <span style="line-height: 34px;text-align: center;">虚拟报名人数:</span>
            <input min="0" id="virtualJoin" type="number">
          </div>
          <div>
            <span style="line-height: 34px;text-align: center;">本轮虚拟中奖人数:</span>
            <input min="0" id="virtual" type="number">
          </div>
          <center>
            <button style="padding: 5px;border-radius: 5px;margin-top:10px;background-color: #428bca;color: white;"
              type="button" onclick="saveSetting()">保存设置</button>
          </center>
        </div>
      </div>
    </div>
</body>

</html>